@{
    ViewData["Title"] = "客户选择";
    Layout = null;
}

<link rel="stylesheet" href="~/layui/css/layui.css">

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 搜索区域 -->
            <div class="layui-form layui-form-pane" style="margin-bottom: 15px;">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">客户编码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search-customerCode" placeholder="请输入客户编码" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">客户名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search-customerName" placeholder="请输入客户名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">客户类型</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search-customerType" placeholder="请输入客户类型" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" id="btn-search">搜索</button>
                        <button class="layui-btn layui-btn-primary" id="btn-reset">重置</button>
                    </div>
                </div>
            </div>

            <!-- 数据表格 -->
            <table id="customerTable" lay-filter="customerTable"></table>
        </div>
    </div>
</div>

<script src="~/layui/layui.js"></script>

<script>
    layui.use(['table', 'form', 'layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        
        // 初始化表格
        table.render({
            elem: '#customerTable',
            url: '/SaleSendOrder/GetCustomers',
            cols: [[
                {type: 'radio', width: 50},
                {field: 'customerCode', title: '客户编码', width: 120},
                {field: 'customerName', title: '客户名称', width: 200},
                {field: 'shortName', title: '客户简称', width: 150},
                {field: 'customerType', title: '客户类型', width: 100},
                {field: 'contactPerson', title: '联系人', width: 100},
                {field: 'contactPhone', title: '联系电话', width: 120}
            ]],
            page: true,
            height: 'full-120'
        });
        
        // 搜索按钮事件
        $('#btn-search').on('click', function(){
            var customerCode = $('#search-customerCode').val();
            var customerName = $('#search-customerName').val();
            var customerType = $('#search-customerType').val();
            
            var where = {};
            if(customerCode) where.customerCode = customerCode;
            if(customerName) where.customerName = customerName;
            if(customerType) where.customerType = customerType;
            
            table.reload('customerTable', {
                where: where,
                page: {curr: 1}
            });
        });
        
        // 重置按钮事件
        $('#btn-reset').on('click', function(){
            $('#search-customerCode').val('');
            $('#search-customerName').val('');
            $('#search-customerType').val('');
            
            table.reload('customerTable', {
                where: {},
                page: {curr: 1}
            });
        });
    });
</script> 